<template>
  <el-tabs tab-position="left" class="tabs-main">
    <el-tab-pane v-for="item in tabs" :key="item.key" :label="item.compName">
      <ComponentForm :title="item.title" :title-explain="item.desc">
        <!-- 选择角色组件 -->
        <template v-if="item.key === 'role-selector'">
          <OptionItem type="radio" @changeData="res => (isRoleMultiSelect = res)" />
          <template slot="object">
            <el-button
              type="text"
              size="small"
              class="open-button "
              @click.stop="isRoleVisible = true"
            >
              选择角色
            </el-button>
            <roles-selector
              :height="200"
              lazy
              :role-visible="isRoleVisible"
              :is-multi-select="isRoleMultiSelect"
              @confirmClick="isRoleVisible = false"
              @cancelClick="isRoleVisible = false"
              @check="handleCheck"
            />
          </template>
        </template>
        <!-- 选择用户组件 -->
        <template v-else-if="item.key === 'user-selector'">
          <OptionItem type="radio" @changeData="res => (isUserMultiSelect = res)" />
          <template slot="object">
            <el-button
              type="text"
              size="small"
              class="open-button"
              @click.stop="isUserVisible = true"
            >
              选择用户
            </el-button>
            <user-Selector
              :user-visible="isUserVisible"
              :is-multi-select="isUserMultiSelect"
              @cancelClick="isUserVisible = false"
              @confirmClick="isUserVisible = false"
            />
          </template>
        </template>
        <template v-else-if="item.key === 'org-selector'">
          <OptionItem type="radio" @changeData="res => (isOrgMultiSelect = res)" />
          <template slot="object">
            <el-button type="text" size="small" class="update-button" @click="isOrgVisible = true">
              选择组织
            </el-button>
            <org-selector
              :org-visible="isOrgVisible"
              :is-multi-select="isOrgMultiSelect"
              @check="handleCheck"
              @cancelClick="isOrgVisible = false"
              @confirmClick="isOrgVisible = false"
            />
          </template>
        </template>
        <template v-else-if="item.key === 'menu-selector'">
          <OptionItem type="radio" @changeData="res => (isMenuMultiSelect = res)" />
          <template slot="object">
            <el-button type="text" size="small" class="update-button" @click="isMenuVisible = true">
              选择菜单
            </el-button>
            <menu-selector
              :menu-visible="isMenuVisible"
              :is-multi-select="isMenuMultiSelect"
              @confirmClick="isMenuVisible = false"
              @cancelClick="isMenuVisible = false"
            />
          </template>
        </template>
      </ComponentForm>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import ComponentForm from './components/component-form/index.vue'
  import OptionItem from './components/component-option-item/index.vue'
  import { tabs } from './consts'

  export default {
    name: 'Test',
    components: {
      ComponentForm,
      OptionItem
    },
    data() {
      return {
        isMenuMultiSelect: true,
        isUserMultiSelect: true,
        isRoleMultiSelect: true,
        isOrgMultiSelect: true,
        isMenuVisible: false,
        isUserVisible: false,
        isRoleVisible: false,
        isOrgVisible: false
      }
    },
    computed: {
      tabs() {
        return tabs
      }
    },
    methods: {
      _setType(type, name) {
        this[name] = type
        console.log((this[name] = type))
      },
      handleCheck(data) {
        console.log(data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tabs-main {
    height: 100%;
    padding-top: 10px;
    margin-left: 10px;
  }

  .update-button {
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: #0084ee;
    cursor: pointer;
    border: 1px solid #0084ee;
    border-radius: 4px;
  }

  .open-button {
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: #0084ee;
    cursor: pointer;
    border: 1px solid #0084ee;
    border-radius: 4px;
  }

  ::v-deep {
    .el-button--text {
      &:hover,
      &:active,
      &:focus {
        color: #0084ee;
        background-color: #e9e9e9;
        border: 1px solid #0084ee;
        border-radius: 4px;
      }
    }
  }
</style>
